<template>
<div>
  <el-card class="box-card">
    <span>招考公告</span>
          <div v-for="index in notices" :key="index" class="text item" style="margin-top: 5px;">

              <el-link style="font-size: 18px;" type="info" @click="showDetail(index.id)">{{index.title}}</el-link><span style="float: right;">
              	
             {{index.beginDate}} - {{index.endDate}}</span> 

			
          </div>
    <!-- size-change:每页显示的条数改变时触发的函数
        current-change：当前页码改变时触发的函数
    -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page="queryinfo.pageNum" :page-sizes="[10, 2, 4, 5]" :page-size="queryinfo.pageSize"
                   layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </el-card>

<!--  公告详情对话框-->
  <el-dialog  title="报考公告详情" :visible.sync="noticeDia">
    <el-descriptions title="公告信息">
      <el-descriptions-item label="标题">{{this.noticedetail.name}}</el-descriptions-item>
      <el-descriptions-item label="内容">{{ this.noticedetail.details }}</el-descriptions-item>
    </el-descriptions>
    <div slot="footer" class="dialog-footer">
      <el-button @click="noticeDia=false">取 消</el-button>
      <el-button type="primary" @click="noticeDia = false">确 定</el-button>
    </div>
  </el-dialog>

</div>
</template>

<script>
// 引入qs依赖
import qs from 'qs';
export default {
  name: "Notice" ,
  data(){
    return{
      //查询条件信息
      queryinfo:{
        pageNum:1,
        pageSize:10
      },
      //保存所有公告
      notices:[],
      //保存单个公告信息
      noticedetail:{
        name:'',
        details:''
      },
      total:0,
	  // pages:0,
      //公告详情对话框
      noticeDia:false
    }

  },
  methods:{
    async queryNotices(){
      //查询公告
      let res = await this.$http.post('/selectAllAffiche',qs.stringify(this.queryinfo));
      // 处理返回值信息，并给出不同的信息提示
      if (res.data.code == 200) { // 查询成功
        this.$message.success(res.data.message);
        this.notices = res.data.data.records;
        this.total = res.data.data.total;
		// this.pages=Math.ceil( this.total/this.queryinfo.pageSize);
		// console.log(this.pages)
      } else {
        this.$message.error(res.data.message);
      }
    },
    //点击文字连接，显示详情
     async showDetail(id){
      this.noticeDia = true;
      let res = await this.$http.post('selectAfficheByID?id='+id);
      if (res.data.code == 200) { // 查询成功
         this.$message.success(res.data.message);
         this.noticedetail.name = res.data.data.title;
         this.noticedetail.details = res.data.data.message;  //TODO
       } else {
         this.$message.error(res.data.message);
       }
    },


    // 每页条数改变的函数
    handleSizeChange(newpagesize) {
      this.queryinfo.pageSize = newpagesize;
      this.queryinfo.pageNum = 1;
      this.queryNotices()
    },
    // 改变查询页数的函数
    handleCurrentChange(newpagenum) {
      this.queryinfo.pageNum = newpagenum;
      this.queryNotices()
    }
  },
  mounted() {
        this.queryNotices();
  }
}
</script>

<style scoped>

</style>